<%
document.require(
	'/diligence/integration/frontend/sencha/',
	'/diligence/service/html/')
%>
<html>
<head>
	<%= Diligence.HTML.build({_content: 'Diligence REST Service - ' + data.resource.plural, _tag: 'title'}) %>
	<%= Diligence.Sencha.extJsHead(conversation, {base: data.base}) %>
</head>
<body>
<%= Diligence.HTML.build({_content: 'Resource: ' + data.resource.plural, _tag: 'h3'}) %>
<div id="grid"></div>
</body>
<script type="text/javascript">
Ext.onReady(function() {
	var pageSize = 20;

	var store = Ext.create('Diligence.data.Store', {
		proxy: {
			url: '.',
			extraParams: {
				mode: 'extjs'
			}
		},
		autoSync: true,
		autoLoad: {
			params: {
				start: 0,
				limit: pageSize,
				meta: true
			}
		}
	});

	store.getColumns(function(store, columns) {
		Ext.create('Ext.grid.Panel', {
			store: store,
			columns: columns,
			forceFit: true,
			selType: 'cellmodel',
			plugins: [
				Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})
			],
			bbar: {
				xtype: 'pagingtoolbar',
				pageSize: pageSize,
				store: store
			},
			renderTo: 'grid',
			height: 500
		});
	});
});
</script>
</html>